<template>
  <view class="container-component">
    <piece>
      <view class="table">
        <!-- 菜品列表 -->
        <view>
          <view v-for="(cartItem, index) in shoppingCart" :key="index" class="cart-item">
            <view class="left">
              <image :src="cartItem.image" class="image" />
              <view class="dish-info">
                <span class="title">{{ cartItem.name }}</span>
                <span class="dish-info-bottom">
                  <span class="count">x{{ cartItem.count }}</span>
                  <span class="specifications">&nbsp;{{ CartItem.genSpecificationsDesc(cartItem.flavors) }}</span>
                </span>
              </view>
            </view>
            <view class="price"><span class="price-char">￥</span>{{ cartItem.price }}</view>
          </view>

          <view class="non-dishes-item" v-if="deliveryFee">
            <view class="content">
              <view class="left">
                <span>配送费</span>
              </view>
              <view class="price"><span class="price-char">￥</span>{{ deliveryFee }}</view>
            </view>
          </view>
          <view class="non-dishes-item" v-if="packingFee">
            <view class="content">
              <view class="left">
                <span>餐盒费</span>
              </view>
              <view class="price"><span class="price-char">￥</span>{{ packingFee }}</view>
            </view>
          </view>
          <view
            class="non-dishes-item"
            v-if="preferentialInfo?.activityDeductionAmount"
            @click="expandCollapseButtonRef?.toggle()"
          >
            <div class="content">
              <view class="left">
                <uni-icons
                  custom-prefix="iconfont"
                  type="icon-manjianyouhui"
                  :size="activityIconSize"
                  color="#fc4c23"
                ></uni-icons>
                <span class="name">店铺优惠</span>
              </view>
              <view class="price preferential-price">
                <span class="price-char">- ￥</span>{{ preferentialInfo!.activityDeductionAmount }}
                <expand-collapse-button
                  ref="expandCollapseButtonRef"
                  :default-fold="true"
                  :fontSize="indicateIconSize"
                  class="icon"
                />
              </view>
            </div>
            <view class="detail" v-if="expandCollapseButtonRef != null && !expandCollapseButtonRef.isFold">
              <view class="detail-content">
                <view
                  class="detail-content-item"
                  v-for="(activity, index) in preferentialInfo?.availableActivityList"
                  :key="index"
                >
                  <span>{{ activity.activityInstanceTitle }}</span>
                  <span>已优惠{{ activity.deductionAmount }}元</span>
                </view>
              </view>
            </view>
          </view>
          <view class="non-dishes-item" @click="toChoosePlatformCoupon">
            <view class="content">
              <view class="left">
                <uni-icons
                  custom-prefix="iconfont"
                  type="icon-platform-coupon-copy"
                  :size="activityIconSize"
                  color="#ffad30"
                ></uni-icons>
                <span class="name">平台券</span>
              </view>
              <view class="price preferential-price">
                <template v-if="preferentialInfo?.allPlatformCouponDeductionAmount == null">
                  <view v-if="preferentialInfo?.platformCouponCount" class="has-available-coupons"
                    >{{ preferentialInfo?.platformCouponCount }}张可用</view
                  >
                  <view v-else class="no-available-coupons">无可用券</view>
                </template>
                <template v-else>
                  <p><span class="price-char">- ￥</span>{{ preferentialInfo!.allPlatformCouponDeductionAmount }}</p>
                </template>
                <uni-icons type="right" :size="indicateIconSize" color="#999" class="icon"></uni-icons>
              </view>
            </view>
          </view>
          <view class="non-dishes-item" @click="toChooseShopCoupon">
            <view class="content">
              <view class="left">
                <uni-icons
                  custom-prefix="iconfont"
                  type="icon-coupon"
                  :size="activityIconSize"
                  color="#fc4c23"
                ></uni-icons>
                <span class="name">店铺券</span>
              </view>
              <view class="price preferential-price">
                <template v-if="preferentialInfo?.allShopCouponDeductionAmount == null">
                  <view v-if="preferentialInfo?.shopCouponCount" class="has-available-coupons"
                    >{{ preferentialInfo?.shopCouponCount }}张可用</view
                  >
                  <view v-else class="no-available-coupons">无可用券</view>
                </template>
                <template v-else>
                  <p><span class="price-char">- ￥</span>{{ preferentialInfo!.allShopCouponDeductionAmount }}</p>
                </template>
                <uni-icons type="right" :size="indicateIconSize" color="#999" class="icon"></uni-icons>
              </view>
            </view>
          </view>
        </view>
        <!-- 统计 -->
        <view class="statistics"
          >合计: <span class="price-char">￥</span
          >{{ preferentialInfo?.activityAndCouponPreferentialAfterOrderAmount }}</view
        >
      </view>
    </piece>
  </view>
</template>

<script setup lang="ts">
import { type Ref, inject, computed } from 'vue'
import Piece from '@/components/piece/index.vue'
import { CartItem } from '@/types/entity/ShoppingCart'
import type { CartItemVO } from '@/types/response/shopping-cart'
import type { PreferentialInfo } from '@/types/response/shop'
import ExpandCollapseButton from '@/components/expand-collapse-button/index.vue'
import { ref } from 'vue'
const props = defineProps<{
  shoppingCart: CartItemVO[] | undefined
  preferentialInfo: PreferentialInfo | undefined
  deliveryFee: number | undefined
  packingFee: number | undefined
  dishListSumPrice: number | undefined
  shopId: number
  selectedPlatformCouponIds: number[] | undefined
  selectedShopCouponIds: number[] | undefined
}>()
const activityIconSize = '38rpx'
const indicateIconSize = '23rpx'
const expandCollapseButtonRef = ref()
// 纯菜品价格
// const dishListSumPrice = computed<number>(() => {
//   if (props.shoppingCart == null) return 0
//   return props.shoppingCart.reduce((sum, curr) => (sum += curr.price), 0)
// })
// 动态计算菜品活动后价格
const dishListSumPriceAfterActivity = computed<number>(() => {
  return (
    (props.dishListSumPrice ?? 0) +
    (props.deliveryFee ?? 0) +
    (props.packingFee ?? 0) -
    (props.preferentialInfo?.activityDeductionAmount ?? 0)
  )
})

// // 选择的优惠券
// const choosePlatformCouponList = ref<CouponCoreInfo[]>([])
// const chooseShopCouponList = ref<CouponCoreInfo[]>([])
// // 选择的平台优惠券优惠的金额，动态计算
// const choosePlatformCouponAmount = computed<number>(() => {
//   return choosePlatformCouponList.value.reduce((sum, curr) => (sum += curr.parValue), 0)
// })
// // 选择的店铺优惠券优惠的金额，动态计算
// const chooseShopCouponAmount = computed<number>(() => {
//   return chooseShopCouponList.value.reduce((sum, curr) => (sum += curr.parValue), 0)
// })
// // 动态计算需要支付的金额
// const needPayAmount = computed<number>(() => {
//   return dishListSumPriceAfterActivity.value - choosePlatformCouponAmount.value - chooseShopCouponAmount.value
// })

// 选择平台优惠券
function toChoosePlatformCoupon() {
  uni.navigateTo({
    url: `/pages/profile/platform-coupon/index?shopId=${props.shopId}&availablePreferentialAmount=${
      dishListSumPriceAfterActivity.value - (props.preferentialInfo?.allShopCouponDeductionAmount ?? 0)
    }&selectableBatchIds=${JSON.stringify(props.preferentialInfo?.platformBatchIds ?? [])}&selected=${JSON.stringify(
      props.selectedPlatformCouponIds ?? []
    )}`
  })
}
// 选择店铺优惠券
function toChooseShopCoupon() {
  uni.navigateTo({
    url: `/pages/profile/shop-coupon/index?shopId=${props.shopId}&availablePreferentialAmount=${
      dishListSumPriceAfterActivity.value - (props.preferentialInfo?.allPlatformCouponDeductionAmount ?? 0)
    }&selectableBatchIds=${JSON.stringify(props.preferentialInfo?.shopCouponBatchIds ?? [])}&selected=${JSON.stringify(
      props.selectedShopCouponIds ?? []
    )}`
  })
}
</script>

<style scoped lang="scss">
.container-component {
  padding-top: 25rpx;

  .piece {
    margin-top: 25rpx;
  }
}

.table {
  padding: 10rpx 25rpx;

  .cart-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0rpx;

    .price {
      display: flex;
      align-items: center;
      font-size: 28rpx;
    }

    .left {
      display: flex;
      flex-grow: 1;
      width: 0;

      .dish-info {
        display: flex;
        justify-content: space-between;
        padding: 0 25rpx;
        flex-direction: column;
      }

      .image {
        width: 80rpx;
        height: 80rpx;
      }

      .title {
        font-size: 32rpx;
      }

      .dish-info-bottom {
        color: rgb(90 90 90);

        .count {
          font-size: 25rpx;
        }

        .specifications {
          font-size: 25rpx;
        }
      }
    }
  }

  .non-dishes-item {
    display: flex;
    flex-direction: column;

    .content {
      $non-dishes-item-height: 65rpx;

      display: flex;
      justify-content: space-between;
      height: $non-dishes-item-height;
      font-size: 30rpx;
      line-height: $non-dishes-item-height;

      .preferential-price {
        display: flex;
        align-items: center;
        color: #e53333;

        .icon {
          margin-left: 5rpx;
        }

        .has-available-coupons {
          $has-available-coupons-height: $non-dishes-item-height * 0.6;

          padding: 4rpx 10rpx;
          height: $has-available-coupons-height;
          font-size: $has-available-coupons-height * 0.7;
          border-radius: 10rpx;
          color: #fff !important;
          background-color: #fd4924;
          line-height: $has-available-coupons-height;
        }

        .no-available-coupons {
          font-size: $non-dishes-item-height * 0.6 * 0.75;
          color: #939393 !important;
        }
      }

      .left {
        display: inline-flex;
        align-items: center;
        height: 100%;

        .name {
          display: inline-block;
          margin-left: 10rpx;
        }
      }
    }

    .detail {
      padding: 5px 10rpx;
      box-sizing: border-box;
      width: 100%;

      .detail-content {
        display: flex;
        padding: 10rpx 15rpx;
        font-size: 25rpx;
        border-radius: 10rpx;
        color: #858585;
        background-color: #f7f7f7;
        flex-direction: column;
        line-height: 40rpx;

        .detail-content-item {
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }

  .statistics {
    float: right;
    height: 60rpx;
    font-size: 30rpx;
    line-height: 60rpx;
  }
}
</style>
